<template>
  <div class="swiper-content-box">
    <div class="my-swiper-box">
      <div class="swiper-img-list">
        <div class="swiper-img-item" v-for="(img,i) in ImgList" :key="i">
          <img :src="img" alt />
        </div>
      </div>
      <div class="arrow-box">
        <div class="left-arrow" @click="leftClick">
          <img src="@/assets/images/icon-left.png" alt />
        </div>
        <div class="right-arrow" @click="rightClick">
          <img src="@/assets/images/icon-right.png" alt />
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="right-content" @click="childMethod">
        <router-link to="">
            <div class="content-title">{{Content[imgIndex].title}}</div>
            <div class="content">{{Content[imgIndex].content}}</div>
        </router-link>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    ImgList: Array,
    Content:Array
  },
  data() {
    return {
      imgIndex:0,
      timeId: null,
      classList: ["pic0", "pic1", "pic2", "pic3", "pic4"],
    };
  },
  mounted(){
    var itemList = document.getElementsByClassName("swiper-img-item");
    for (var i = 0; i < itemList.length; i++) {
      itemList[i].className = "swiper-img-item " + this.classList[i];
    }
    // this.imgMove()
  },
  methods: {
    // imgMove() {
    //   let itemList = document.getElementsByClassName("img-item");
    //   this.timeId = setInterval(() => {
    //     this.classList.push(this.classList[0]);
    //     this.classList.shift();
    //     for (var i = 0; i < itemList.length; i++) {
    //       itemList[i].className = "img-item " + this.classList[i];
    //     }
    //   }, 1500);
    // },
    leftClick() {
      // if (this.timeId) {
      //   clearInterval(this.timeId);
      // }
      let itemLIst = document.getElementsByClassName("swiper-img-item");
      this.classList.unshift(this.classList[4]);
      this.classList.pop();
      for (var i = 0; i < itemLIst.length; i++) {
          itemLIst[i].className = "swiper-img-item " + this.classList[i];
      }
      this.imgIndex--
      if(this.imgIndex<0){
          this.imgIndex=4
      }
    },
    rightClick() {
      // if (this.timeId) {
      //   clearInterval(this.timeId);
      // }
      var itemlist = document.getElementsByClassName("swiper-img-item");
      this.classList.push(this.classList[0]);
      this.classList.shift();
      for (var i = 0; i < itemlist.length; i++) {
        itemlist[i].className = "swiper-img-item " + this.classList[i];
      }
      this.imgIndex++
      if(this.imgIndex>4){
          this.imgIndex=0
      }
    },
    childMethod(){
        this.$emit('FatherMethod')
    }
  }
};
</script>

<style lang="scss" scoped>
.swiper-content-box{
    display: flex;
    align-items: center;
}
.my-swiper-box {
  position: relative;
  width: 576px;
  height: 343px;
  overflow: hidden;
  .swiper-img-list {
    .swiper-img-item {
      width: 228px;
      position: absolute;
      left: 0;
      top: 86px;
      transition: all 0.3s ease;
      overflow: hidden;
      > img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .left-arrow,
  .right-arrow {
    position: absolute;
    top: 50%;
    transition: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 10;
    > img {
      width: 20px;
      margin: 9px;
    }
  }
  .left-arrow {
    left: 0;
  }
  .right-arrow {
    right: 0;
  }
}
.pic0 {
  transform: translate3d(-228px, 0, 0) scale(1);
  opacity: 0.1;
  z-index: 1;
}
.pic1 {
  transform: translate3d(0px, 0, 0) scale(1);
  opacity: 0.8;
  z-index: 2;
}
.pic2 {
  transform: translate3d(348px, 0, 0) scale(1);
  opacity: 0.8;
  z-index: 3;
}
.pic3 {
  transform: translate3d(178px, 0, 0) scale(2);
  opacity: 1;
  z-index: 4;
}
.pic4 {
  transform: translate3d(576px, 0, 0) scale(1);
  opacity: 0.1;
  z-index: 3;
}
.right-content{
    flex:1;
    margin-left: 30px;
    a{
        padding:60px 20px;
        display: block;
    }
    .content-title{
        margin-bottom:10px;
        font-size:16px;
        color:#333;
        font-weight: bold;
    }
    .content{
        font-size: 14px;
        color:#666;
        line-height: 2;
        -webkit-line-clamp: 7;
    }
}
</style>